<template>
  <div>

    <Head />
    <div class="home-container">
      <div class="home-wrap">
        <div class="logo-wrap"
             id="hof">
          <div class="rotate-text">_ a project of NonceBox</div>
          <img class="img"
               src="@/assets/icons/hof.png" />
          <h2>Hall of Fame</h2>
          <div class="heads">
            <img src="@/assets/icons/banner.png" />
          </div>
        </div>

        <div class="home-content">
          <div class="describe-wrap"
               id="wth">
            <div class="title">WTF HoF?</div>
            <div class="content">
              <div style="margin-bottom: 10px">
                Crypto Hall of Fame is pixel and Loot-like NFT collections
                created by NonceBox. We are going to build a crypto metaverse
                about wealth, power and fame with our HoF cards. Each NFT will
                be a seed account or NPC in Metaverse Game.
              </div>
              <br />·&nbsp;&nbsp;Inspired by Crypto Punks and Project Loot, also
              learned a lot from Dungeons & Dragons (DnD/TRPG).
              <br />·&nbsp;&nbsp;Famous people in crypto history are the main
              part of our cards. We hope this project provides a
              thought-provoking snapshot of the most notable people in crypto at
              the dawn of the age of mass adoption. <br />·&nbsp;&nbsp;There are
              a total of 8,000 HoF cards made by 40 different faces, 4 basic
              attributes and 1 total score. NonceBox will charge 3% of the
              secondary royalties to fund community projects.
            </div>
          </div>
          <div class="mint-wrap">
            <Row class="connect">
              <Col :span="12"
                   class="title"
                   id="mint">Mint</Col>
              <Col :span="12">
              <div class="flex-end connet-custom-btn1">
                <Button ghost
                        class="connect-btn"
                        @click="onConnect">
                  <Account ref="mychild" />
                </Button>
              </div>
              </Col>
            </Row>

            <Row :gutter="[48]">
              <Col :lg="12"
                   :md="12"
                   :xl="12"
                   :sm="12"
                   :xs="24"
                   style="margin-bottom: 40px">
              <Row>
                <Col v-for="(item, i) in list"
                     :key="i"
                     class="e"
                     :span="8">
                <div class="li">
                  <img class="img"
                       :src="importIcon(item.img)" />
                  <h5 v-html="item.title"
                      style="text-align: center; line-height: 25px"></h5>
                </div>
                </Col>
              </Row>
              <div class="connet-custom-btn">
                <Button ghost
                        @click="callFreeMint">FREE MINT</Button>
              </div>
              <Row>
                <Col :span="12"
                     class="m-size"><span class="red m-size">382</span> / 800 Remained</Col>
                <Col :span="12"
                     class="red m-size"
                     style="text-align: end">Close in 39:00:00</Col>
              </Row>
              </Col>

              <Col :lg="12"
                   :md="12"
                   :xl="12"
                   :sm="12"
                   :xs="24">
              <div class="card">
                <Row>
                  <Col v-for="(item, i) in list1"
                       :key="i"
                       :span="8">
                  <div class="li">
                    <img class="img"
                         :src="importIcon(item.img)" />
                    <h5 v-html="item.title"
                        style="
                            text-align: center;
                            color: #fff;
                            line-height: 25px;
                          "></h5>
                  </div>
                  </Col>
                </Row>
                <Row :gutter="[16]"
                     style="margin: 10px 0">
                  <Col :span="12"
                       class="btns">
                  <img src="@/assets/icons/edd.png"
                       alt=""
                       @click="edd" />
                  <div class="title">{{ count }}</div>
                  <img src="@/assets/icons/add.png"
                       alt=""
                       @click="add" />
                  </Col>
                  <Col :span="12"
                       class="flex-end">
                  <div class="mint-btn white"
                       @click="callMint">MINT</div>
                  </Col>
                </Row>
                <Row>
                  <Col :span="12"
                       class="white m-size">382 / 800 Remained</Col>
                  <Col :span="12"
                       class="white m-size"
                       style="text-align: end">Close in 39:00:00</Col>
                </Row>
              </div>
              </Col>
            </Row>
          </div>
          <div class="roadmap-wrap"
               id="road">
            <div class="m-align title r-title">Roadmap</div>
            <div v-for="(item, i) in roadmaps"
                 :key="i">
              <div class="sub-title">{{ item.title }}</div>
              <div class="sub-content">{{ item.des }}</div>
            </div>
          </div>
          <div class="links">
            <div class="title m-align">Links</div>
            <div class="link-li">
              <a v-for="(item, i) in links"
                 :key="i"
                 :href="item.url">
                <img :src="importIcon(item.img)" />
              </a>
            </div>
            <div class="foot">
              <img class="foot-img"
                   src="@/assets/icons/hof.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import importIcon from "../import-icon";
import { Button, Row, Col } from "ant-design-vue";
import Head from "../components/head.vue";
import { mapState } from "vuex";
import Web3 from "web3";
import Account from "@/components/account";

export default Vue.extend({
  components: {
    Button,
    Row,
    Col,
    Head,
    Account,
  },
  computed: {
    ...mapState({
      connector: (state) => state.connector,
      address: (state) => state.user.address,
    }),
  },
  data() {
    return {
      roadmaps: [
        {
          title: "- Pre-sale round",
          des:
            "10% HoF cards will be free mint, one address one HoF. Only available for pre-sale whitelist address from early supporters.",
        },
        {
          title: "- Mint round",
          des:
            "87.5% HoF cards will be mint, Let's Boom Ethereum Gas! Mint price: 0.06 ETH, each address can mint 10 at most.",
        },
        {
          title: "- Reward round",
          des:
            "The development team will reserve 200 NFTs to bribe influencer and reward community contributors.",
        },
        {
          title: "- Airdrop round",
          des:
            "Our extremely talented sketches and community creators will paint some really awesome NFTs and airdrop to HODLers.",
        },
        {
          title: "- Token round",
          des:
            "Time to make a token for all HODLers! We will establish a liquidity pool on Uniswap and seed it in order to help stabilize the price of NFTs/token.Let's expect AGLD II here!",
        },
      ],
      links: [
        {
          img: "/icons/icon1.png",
          url: "",
        },
        {
          img: "/icons/icon2.png",
          url: "",
        },
        {
          img: "/icons/icon3.png",
          url: "",
        },
        {
          img: "/icons/icon4.png",
          url: "",
        },
      ],
      list: [
        { title: "Whitelist<br/>ONLY", img: "/icons/m2.png" },
        { title: "Max Mint<br/>1", img: "/icons/m4.png" },
        { title: "Limited Time<br/>Sale", img: "/icons/m6.png" },
      ],
      list1: [
        { title: "Mint Price<br/>0.06ETH", img: "/icons/m1.png" },
        { title: "Max Mint<br/>0 10", img: "/icons/m3.png" },
        { title: "Limited Time<br/>Sale", img: "/icons/m5.png" },
      ],
      count: 10,
    };
  },
  methods: {
    importIcon,
    add() {
      this.count = this.count + 1;
      if (this.count > 10) {
        this.count = 10;
      }
    },
    edd() {
      if (this.count === 0) {
        return;
      }
      this.count = this.count - 1;
    },
    onConnect() {
      this.$refs.mychild.connect();
    },
    async callFreeMint() {
      if (!this.connector) {
        alert("please connect to wallet");
        return;
      }
      if (!this.address) {
        alert("check wallet address");
        return;
      }
      const CONTRACT = "0x6A76aC31D7A5231Cc17f13F09Aa21937268c459a";
      const web3 = new Web3();
      const data = web3.eth.abi.encodeFunctionCall(
        {
          name: "mintPresaleTokens",
          inputs: [{ name: "count", type: "uint256" }],
        },
        [1]
      );
      const tx = {
        from: this.address,
        to: CONTRACT,
        value: web3.utils.toHex(web3.utils.toWei("0.06", "ether")),
        data,
      };
      const txHash = await this.connector.sendTransaction(tx).catch(() => "");
      if (txHash) {
        alert("success");
        // SUCCESS
      } else {
        alert("error");
        // ERROR
      }
    },
    async callMint() {
      var count = this.count;
      if (!this.connector) {
        alert("please connect to wallet");
        return;
      }
      if (!this.address) {
        alert("check wallet address");
        return;
      }
      const CONTRACT = "0x6A76aC31D7A5231Cc17f13F09Aa21937268c459a";
      const web3 = new Web3();
      const data = web3.eth.abi.encodeFunctionCall(
        {
          name: "mintTokens",
          inputs: [{ name: "count", type: "uint256" }],
        },
        [count]
      );
      const tx = {
        from: this.address,
        to: CONTRACT,
        value: web3.utils.toHex(web3.utils.toWei(0.06 * count + "", "ether")),
        data,
      };
      const txHash = await this.connector.sendTransaction(tx).catch(() => "");
      if (txHash) {
        alert("success");
        // SUCCESS
      } else {
        alert("error");
        // ERROR
      }
    },
  },
});
</script>

<style lang="less" scoped>
// @import '../styles/variables';
@font1: "rowdies";
@media screen and (max-width: 850px) {
  .home-wrap {
    width: 100% !important;
  }
  .home-content {
    padding: 0 25px;
  }
  .rotate-text {
    display: block !important;
    transform: rotate(-90deg) scale(0.8);
    left: -50px;
    font-size: 12px;
    top: 80px;
    position: absolute;
  }
  .connect-btn {
    width: 100% !important;
    font-size: 12px !important;
  }
  .content {
    font-size: 12px !important;
  }
  .roadmap-wrap {
    width: 100% !important;
    .sub-title {
      font-size: 16px !important;
    }
    .sub-content {
      font-size: 16px !important;
    }
  }
  .m-align {
    text-align: inherit !important;
  }
  .title {
    font-size: 18px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  .connet-custom-btn {
    button.ant-btn-background-ghost {
      font-size: 16px !important;
    }
  }
  .m-size {
    font-size: 12px;
  }
  .foot-img {
    width: 88px !important;
  }
  .links {
    width: 100% !important;
  }
}

.home-container {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 64px;
  .home-wrap {
    width: 850px;
    margin: 0 auto;
    .logo-wrap {
      text-align: center;
      color: #0c0c0c;
      padding-top: 7%;
      position: relative;
      .rotate-text {
        display: none;
      }
      h2 {
        font-size: 24px;
        font-weight: bold;
        font-family: @font1;
      }
      .img {
        margin: 25px;
        width: 40%;
      }
    }
    .heads {
      text-align: center;
      margin-top: 15%;
      margin-bottom: 80px;
      img {
        width: 100%;
      }
    }
  }
  .home-content {
    box-sizing: border-box;
    line-height: 40px;
    .describe-wrap {
      .content {
        font-size: 24px;
        margin-top: 40px;
      }
    }
    .mint-wrap {
      margin: 70px 0;
      .connect {
        margin-bottom: 60px;
        .connect-btn {
          min-width: 282px;
          padding-top: 10px;
          padding-bottom: 10px;
          height: auto;
        }
      }
      .li {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          margin-bottom: 18px;
        }
      }
      .card {
        background: #df4468;
        border-radius: 10px;
        padding: 34px;
        .mint-btn {
          background: #050505;
          border-radius: 5px;
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #fff;
          font-weight: bold;
          cursor: pointer;
        }
        .btns {
          display: flex;
          justify-content: space-between;
          align-items: center;
          div {
            color: #fff;
          }
          img {
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .roadmap-wrap {
      width: 581px;
      margin: 0 auto;
      .r-title {
        margin-bottom: 30px;
      }
      .sub-title {
        color: #df4468;
        font-weight: bold;
        font-size: 26px;
        margin-bottom: 17px;
      }
      .sub-content {
        font-size: 24px;
        margin-bottom: 30px;
      }
    }
    .links {
      width: 345px;
      padding-top: 50px;
      margin: 0 auto;
      .link-li {
        margin: 0 auto;
        max-width: 345px;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
      }
      .foot {
        margin-top: 100px;
        margin-bottom: 80px;
        text-align: center;
        .foot-img {
          width: 60%;
          height: auto;
        }
      }
    }
  }
}
.m-align {
  text-align: center;
}
.title {
  font-size: 30px;
  font-family: @font1;
  font-weight: 400;
  color: #000;
}
.inline {
  display: inline;
}
.connet-custom-btn {
  width: 100%;
  margin: 15px 0;
  button.ant-btn-background-ghost {
    background: #df4468 !important;
    height: 58px;
    border-radius: 5px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    border: none;
    width: 100%;
  }
}
.connet-custom-btn1 {
  width: 100%;
  button.ant-btn-background-ghost {
    border: 1px solid #df4468;
    color: #df4468;
  }
}
.white {
  color: #fff;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.red {
  color: #df4468;
}
</style>
